<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>-_-</title>

 	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" href="index.css" /> 

	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="index.js"></script>
<script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?sensor=true"> </script>
<script type = "text/javascript">
function onSuccess(position) {
	  currentLocation = position;
	  alert("onSuccess" + currentLocation);
	  if (!map) {
	    loadMapScript();
	  }
	}

	function onError(error) {
	  alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
	}

	
window.onload = function (){
  var latlng = new google.maps.LatLng(37.8117384, 126.9397817);
  var myOptions = {
   zoom: 14,
   center:latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
	 };
       var map = new google.maps.Map(document.getElementById("map_cvs"), myOptions);
   	  navigator.geolocation.getCurrentPosition(null, onError);
   	  
 }


var fInitialize = function (lat, lng){
	var latlng = new google.maps.LatLng(lat, lng);
    alert(latlng);     		
	var myOptions = {
		 zoom: 14,
		 center: latlng,
		 mapTypeId: google.maps.MapTypeId.ROADMAP
			 };
	     var map = new google.maps.Map(document.getElementById("map_cvs"), myOptions);
	 	  navigator.geolocation.getCurrentPosition(onSuccess, onError);
	 	 var infowindow = new google.maps.InfoWindow({
	          map: map,
	          position: latlng,
	          content: '���� ���� ����'
	        });
	 	 var marker = new google.maps.Marker({
	 		map: map,
	 		position: latlng,
	 		icon: 'img/brown_MarkerA.png'
	 	});
	 	 var marker2 = new google.maps.Marker({
		 		map: map,

	 		  position: new google.maps.LatLng(37.496584,127.044261),
	 		icon: 'img/brown_MarkerB.png'

	 	 })
	 	 var marker3 = new google.maps.Marker({
		 		map: map,

	 		  position: new google.maps.LatLng(37.497538,127.034433),
	 		icon: 'img/brown_MarkerC.png'

	 	 })
	 	 
		
	 	//excute polygon creator
	 		var poly = document.getElementById('poly')
	 		var creator = null;
	 		poly.onclick = function(){ 
	 				alert('���� ���� ������ ������ �������ּ���.'),
	 		 		creator = new PolygonCreator(map)

	 		 };		 
	 	//reset
			document.getElementById('reset').onclick = function(){ 
	 		 	creator.destroy(),
	 		 	creator= null
	 		 };		 
	 		 	
	
};



/*
 geocoder = new google.maps.Geocoder();
 geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
     map: map,
     position: results[0].geometry.location
   });
 */ 
 
</script>
	<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
	<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
	</head>
  
  <body>
	<div data-role="page" id="page-home" class="type-interior" data-theme="b">

	<div data-role="header" data-theme="b">
		<h1 style="text-align: center">Geolocation test</h1>
	</div>


		<div class="content-primary">
	   

		    <div class="api-div" id="api-geolocation">
				<h2>Geolocation</h2>
				<blockquote>
  					<p>The <code>geolocation</code> object provides access to the device's GPS sensor.</p>
				</blockquote>
				<h4 class="help"><b>Toggle</b> to stop/start
				geolocation watch. <br/><b>Get Current</b> for one-time geolocation reading.</h4>
				<div class="ui-grid-a">
					<div class="ui-block-a"><div data-role="button" onclick="toggleWatchPosition();">Toggle</div></div>
					<div class="ui-block-b"><div data-role="button" onclick="getCurrentPosition();">Get Current</div></div>
					<button onclick="getCurrentPosition2();">Get Lat, Lgt</button>
					<button onclick="showPos();">Get!!!!!!! Lat, Lgt</button>
				</div>
   				<div id="cur_position"></div>
   				<img id="map"/>
   				<div id="map_cvs" style="width: 320px; height: 240px;"></div><br><br>
   				<button id="poly">Draw</button>		
   				<button id="reset">Reset</button>						
			</div>

			
			</div>

		</div>
	<script type="text/javascript" charset="utf-8" src="js/geolocation.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/polygon.min.js"></script>
	
  </body>
</html>
